<template>
  <el-row class="min-h-screen bg-indigo-500">
    <el-col :lg="16" :md="12" class="flex items-center justify-center">
      <div>
        <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
        <div class="text-gray-200 text-sm">Vue3 + vite 大模型应用项目案例</div>
      </div>
    </el-col>
    <el-col
      :lg="8"
      :md="12"
      class="bg-light-50 flex items-center justify-center flex-col"
    >
      <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>
      <div
        class="flex items-center justify-center my-5 text-gray-300 space-x-2"
      >
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>
      <el-form :model="form" ref="formRef" :rules="rules" class="w-[250px]">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名">
            <template #prefix>
              <el-icon>
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            show-password
          >
            <template #prefix
              ><el-icon>
                <Lock /> </el-icon
            ></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            round
            color="#626aef"
            class="w-[250px]"
            type="primary"
            @click="onSubmit"
            :loading="loading"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
      <el-form-item>
        <el-button
          round
          color="#626aef"
          class="w-[250px]"
          type="primary"
          @click="openRegisterForm"
          >注册</el-button
        >
      </el-form-item>
    </el-col>
  </el-row>
  <!-- 注册表单抽屉 -->
  <form-drawer
    ref="registerFormDrawerRef"
    title="注册账号"
    size="34%"
    confirmText="注册"
    destroyOnClose
    @submit="registerOnSubmit"
  >
    <el-form
      :model="registerForm"
      ref="registerFormRef"
      :rules="registerRules"
      label-width="100px"
      size="small"
      label-position="top"
    >
      <el-form-item prop="username" label="用户名">
        <el-input
          size="large"
          v-model="registerForm.username"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input
          size="large"
          v-model="registerForm.password"
          type="password"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item prop="repassword" label="确认密码">
        <el-input
          size="large"
          v-model="registerForm.repassword"
          type="password"
          placeholder="请再次输入密码"
        />
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input
          size="large"
          v-model="registerForm.email"
          placeholder="请输入邮箱"
        />
      </el-form-item>
    </el-form>
  </form-drawer>
</template>

<script setup>
import FormDrawer from '~/components/FormDrawer.vue'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { User, Lock, Film } from '@element-plus/icons-vue'
// import { login } from '~/api/manager'
// import { ElNotification } from 'element-plus'
import { toast } from '~/composables/util'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { useRegister } from '~/composables/useManager'

// import {
//     setToken
// } from '~/composables/auth'

const store = useStore()
const router = useRouter()

const {
  formDrawerRef: registerFormDrawerRef,
  formRef: registerFormRef,
  form: registerForm,
  onSubmit: registerOnSubmit,
  rules: registerRules,
  openRegisterForm
} = useRegister()

// do not use same name with ref
const form = reactive({
  username: '',
  password: ''
})

const formRef = ref(null)
const loading = ref(false)

const onSubmit = () => {
  // console.log('submit!')
  formRef.value.validate((valid) => {
    if (!valid) {
      return false
    }
    console.log('验证通过')
    loading.value = true
    store
      .dispatch('login', form)
      .then(() => {
        toast('登陆成功', 'success')
        router.push('/')
      })
      .finally(() => {
        loading.value = false
      })

    //     login(form.username, form.password).then(res => {
    //         console.log(res.token);
    //         // 提示登陆成功
    //         toast("登陆成功", "success")
    //         // ElNotification({
    //         //     title: 'Success',
    //         //     message: "登陆成功",
    //         //     type: 'success',
    //         //     duration: 3000
    //         // })
    //         //存储用户token
    //         // cookies.set("admin-token", res.token)
    //         setToken(res.token)
    //         // 获取用户信息
    //         // getinfo().then(res2=>{
    //         //     store.commit("SET_USERINFO",res2)
    //         //     console.log(res2);
    //         // })

    //         //跳转到后台首页
    //         router.push("/")

    //     }).finally(()=>{
    //     loading.value = false
    // })
  })
}

const rules = {
  username: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur'
    }
    // {
    //     min: 3,
    //     max: 5,
    //     message: '用户名长度必须是3-5个字符',
    //     trigger: 'blur'
    // },
  ],
  password: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur'
    }
  ]
}

function onKeyUp(e) {
  console.log(e)
  if (e.key == 'Enter') onSubmit()
}

// 添加键盘监听的生命周期事件
onMounted(() => {
  // console.log("login mounted");
  // 添加键盘监听实现回车登录
  document.addEventListener('keyup', onKeyUp)
})

// 销毁生命周期
onBeforeUnmount(() => {
  // console.log("login before unmount");
  // 移除键盘监听
  document.removeEventListener('keyup', onKeyUp)
})
</script>
